<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>文章列表</span>
      </div>
      <!-- 搜索区域 -->
      <div class="search-box">
        <el-form :inline="true" :model="q">
          <el-form-item label="文章分类">
            <!-- 这里是筛选的地方 筛选后 再通过点击筛选发送ajax 得到新数据 再渲染 -->
            <el-select v-model="q.cate_id" placeholder="请选择分类" size="small">
              <el-option v-for=" item in Artlist" 
              :key="item.id"  
              :label="item.cate_name"
              :value="item.id"></el-option>
                <!-- 交互性提升 -->
              <!-- <el-option label="区域二" value="beijing"></el-option> -->
            </el-select>
          </el-form-item>
          <el-form-item label="发布状态" style="margin-left: 15px;">
            <el-select v-model="q.state" placeholder="请选择状态" size="small">
              <el-option label="已发布" value="已发布"></el-option>
              <el-option label="草稿" value="草稿"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small" @click="artCletiList">筛选</el-button>
            <el-button type="info" size="small" @click="restartCletiList">重置</el-button>
            <!-- 重置 使数据回到初始状态 进行赋值操作 这里的q 其实算是 获取到的数据的副本 交接工作吧 这么立即 一个获取数据 一个存储改变的情况后的数据 -->
          </el-form-item>
        </el-form>
        <!-- 发表文章的按钮 一个总弹出框的源头 -->
        <el-button type="primary" size="small" class="btn-pub" @click="dialogVisible = true">发表文章</el-button>
      </div>



      <!-- 文章表格区域 -->
            <el-table
        :data="artClLists"
        style="width: 100%"
        max-height="250">
        <el-table-column
          label="文章标题"
          width="150">
          <template #default="{row}">
                <el-link type="primary" @click="cskartList(row.id)">{{row.title}}</el-link>
          </template>
        </el-table-column>
        <el-table-column
          prop="cate_name"
          label="文章分类"
          width="120">
        </el-table-column>
        <el-table-column
          label="发布时间"
          width="120">
          <template #default="{row}">
            {{formaDate(row.pub_date)}}
          </template>
        </el-table-column>
        <el-table-column
          prop="state"
          label="状态"
          width="120">
        </el-table-column>
        <el-table-column
          label="操作"
          width="120">  
          <template #default="{row}">
            <el-button @click="delartlist(row.id)"> 删除</el-button>
          </template>
        </el-table-column>
      </el-table>



      <!-- 分页区域  其实也就是 一个个数据的组成页数-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="q.pagenum"
        :page-sizes="[2, 3, 5, 10]"
        :page-size="q.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
        <!-- total 总的数据条数   current-page当前默认显示的页数 初始100每页   page-sizes可选项 多少个每项-->
      </el-pagination>
    </el-card>


<!-- 这一块是富文本的哪一个弹出图层 -->
    <el-dialog title="文章" 
  :visible.sync="dialogVisible"
  fullscreen
  :before-close="handleClose"
  width="30%">
    <!-- 满屏 fullscreen  -->
        <el-form :rules="rules" ref="form" :model="reluerForm" label-width="80px">
            <el-form-item label="活动名称" prop="title">
                <el-input v-model="reluerForm.title"></el-input>
            </el-form-item>
            <el-form-item label="活动区域" prop="c  ate_id">
                <el-select v-model="reluerForm.cate_id" placeholder="请选择活动区域" style="width:100%" prop="cate_id">
                    <el-option v-for="item in Artlist" :key="item.id" :label="item.cate_name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="文章内容" prop="content">
              <!-- 使用 v-model 进行双向的数据绑定 -->
              <!-- 富文本 -->
              <quill-editor v-model="reluerForm.content"></quill-editor>
            </el-form-item>
            <el-form-item label="文章封面">
                <!-- 用来显示封面的图片 -->
              <img src="../../../assets/images/cover.jpg" alt="" class="cover-img" ref="imgRef" />
              <br />
              <!-- 文件选择框，默认被隐藏 -->
              <input type="file"  @change="chooseImg" style="display: none;" accept="image/*" ref="iptFile" />
              <!-- 选择封面的按钮 --> 
              <el-button type="text" @click="$refs.iptFile.click()">+ 选择封面</el-button>
              
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="pubArticle('已发布')" >发布</el-button>
              <el-button type="info" @click="pubArticle('草稿')">存为草稿</el-button>
            </el-form-item>
        </el-form> 
    </el-dialog>

    <!-- 蔡徐坤图层 -->
    <el-dialog title="文章标题"
    width="80%6"
      :visible.sync = elllinkdialogVisible
    >
      <h1 class="title">{{ artDetail.title }}</h1>
          <div class="info">
            <span>作者：{{ artDetail.nickname || artDetail.username }}</span>
            <span>发布时间：{{  formaDate(artDetail.pub_date) }}</span>
            <span>所属分类：{{ artDetail.cate_name }}</span>
            <span>状态：{{ artDetail.state }}</span>
          </div>  
      <el-divider></el-divider>

      <img :src="'http://big-event-vue-api-t.itheima.net' + artDetail.cover_img" alt="" />

      <div v-html="artDetail.content"></div>
    </el-dialog>
  </div>
</template>

<script>
import dayjs from 'dayjs'
//  这里导入照片文件 也可以被立马解析 
import defultImg from '../../../assets/images/cover.jpg'
export default {

  name: 'ArtList',
  data() {
    return {
      artDetail:{}, // 文章详情 蔡徐坤的图层数据

      // 链接的弹出图层
      elllinkdialogVisible:false,

      // 分页 这个地方是默认娴熟层
      currentPage4: 1,
      // 查询参数对象
      // 组件外部 的初始化数据
      artClLists:[], // 保存的文章列表 这是得到的文章的数据
      q: {
        pagenum: 1, //当前页
        pagesize:2, // 煤业显示多少个
        cate_id: '',
        state: ''
      },
      total:0,
      reluerForm:{
          title:'',
          cate_id:'',
          content: '',
          cover_img:null,
          state:''
      },
      Artlist:[], // this.q 的副本 
      rules:{
        title:[{ required: true, message: '请输入活动名称', trigger: 'blur' },
                { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        cate_id:[{ required: true, message: '请输入活动名称', trigger: 'blur' }],
        content:[{ required: true, message: '请输入活动名称', trigger: 'blur' }]
      },
        dialogVisible:false // 控制对话框的显示隐藏
    }
  },
  created(){
    this.getArtList()
    this.artCletiList()
  },
  methods:{
    // delartlist
    delartlist(id){
      this.$confirm('你要删除吗？').then(async ()=>{
        const {data:res} = await this.$axios.delete('/my/article/info',{params:{id}})
        console.log(res);
        if(this.artClLists.length === 1){
          this.q.pagenum--
        }
        this.artCletiList()
      })
    },
    // 这是那个文章 及你太美
    async cskartList(id){
      this.elllinkdialogVisible =true
      const {data:res}  = await this.$axios.get('/my/article/info',{params:{id}})
      console.log(res,'及你太美');
      if(res.code === 0){
        // 新设立的数据存储的地方 进行赋值 
        this.artDetail = res.data
        console.log(this.artDetail);
      }
    },
    // restartCletiList 重置筛选 回到初始状态
    restartCletiList(){
      this.q = {
        pagenum: 1, //当前页
        pagesize:2, // 煤业显示多少个
        cate_id: '', // id值
        state: ''   // 内容值
      }
      this.artCletiList()
    },
    // 分页的函数
     handleSizeChange(val) { // 一页多少个
        console.log(`每页 ${val} 条`);
        this.q.pagesize = val
        this.artCletiList() 
      },
      handleCurrentChange(val) { //当前第几页
        console.log(`当前页: ${val}`);
        this.q.pagenum = val
        this.artCletiList()
      },
    // 将时间 美化
    formaDate(time){
      return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
    },

    // 获取这个组件最外层的初始数据
    async artCletiList(){
      const {data:res} = await this.$axios.get('/my/article/list',{params:this.q})
      console.log(res,'初始化筛选重置的地方数据列表');
      if(res.code === 0){
        this.artClLists = res.data //文章数据赋值
        console.log(res,'下一句是total筛选'); // 得到当前的数据总项
        // 得到总数文章数据 再进行赋值 
        this.total = res.total
        this.$message.success(res.message)
        console.log(this.artClLists);
      }
    },
    // 文章状态 顺便进行兜底检验
       pubArticle(state){
        this.reluerForm.state = state
        this.$refs.form.validate(async (valid)=>{
          if(!valid)return
          if(this.reluerForm.cover_img === null){
            this.$message.error('请上传图片')
          }
          // 接口文档要求 要转成formdata数据  因为 我们传了文件
          const fd = new FormData()
          console.log(Object.keys(this.reluerForm));
          Object.keys(this.reluerForm).forEach(key =>{
            fd.append(key,this.reluerForm[key])
          })
          const {data:res} = await this.$axios.post('/my/article/add',fd)
          if(res.code !==0)return this.$message.error(res.message)
          this.$message.success('ojbk')
          this.dialogVisible = false
        })
      },
// 获取图片
  chooseImg(e){
    console.log(e.target.files);
    const files = e.target.files
    if(files.length){
      this.reluerForm.cover_img = files[0]
      const url = URL.createObjectURL(files[0])
      console.log(url);
      console.log(url);// 得到了2进制的地址 blob:http://localhost:8080/a989c3c7-c5af-4115-bbbf-b99aad6402e9
      this.$refs.imgRef.src = url
    }else{
      this.$refs.imgRef.src = defultImg // 导入的那个照片 再我们取消的时候 让他回到一个初始状态 
      this.reluerForm.cover_img = null
    }
  },
    // 获取文章分类
    async getArtList(){
      // 单纯的ajax发送  再赋值到data里面 模板要用到的 必须再data里面
      const {data:res} =  await this.$axios.get('/my/cate/list')
      console.log(res);
      this.Artlist = res.data
    },
    //   引进来的 element-ui 点击那个叉叉 关闭dialog
      handleClose(done) {
        this.$confirm('确认关闭？') // 返回一个promise对象
          .then(()=> {
              this.$message.success('关闭成功')
            done();
          })
          .catch(() => {console.log(new Error('xxx'));});
        }
    }
}
</script>

<style lang="less" scoped>
.search-box {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  .btn-pub {
    margin-top: 5px;
  }
}
// 富文本的高度 最小高度
// 加deep 样式穿透  一般 先写！important  没作用 再写deep  在没有用 代码写错了
/deep/ .ql-editor {
  min-height: 300px !important;
}
</style>